<!DOCTYPE html>
<meta charset="UTF-8">
<table data-type="grid" title="行及单元格背景及事件自定义" style="width: 700px; height: 250px"
	data-defs="
				singleSelect: true,border:false,headerCls:'byb',
				method:'get',url: 'demo/testdata/grid_data1.json',
				fit:true,fitColumns:true,
				rowStyler: rowstyleformatter
			">
	<thead>
		<tr>
			<th data-defs="field:'itemid',width:80,checkbox:true">ID</th>
			<th data-defs="field:'productid',width:200,formatter:rowStyleShowDetail">产品名称</th>
			<th data-defs="field:'listprice',width:80,align:'right',formatter:formatPrice">成本</th>
			<th data-defs="field:'unitcost',width:80,align:'right'">单价</th>
			<th data-defs="field:'attr1',width:100">属性</th>
			<th data-defs="field:'status',width:60,align:'center'">状态</th>
			<th data-defs="field:'op',width:60,align:'center',formatter:setOperation">操作</th>
		</tr>
	</thead>
</table>
<script>
	function formatPrice(val, row) {
	    if (val < 300) {
		    return '<span style="color:red;">(' + val + ')</span>';
	    } else {
		    return val;
	    }
    }
    function setOperation(val, row) {
	    return '<span><a href="#" onclick="rowStyle_add(\'' + row.itemid
	            + '\')">删除</a>&nbsp;<a href="#" onclick="rowStyle_add(\'' + row.itemid + '\')">审核</a></span>';
    }
    function rowStyle_add(o) {
	    alert(o);
    }
    function rowStyleShowDetail(val, row) {
	    return '<a href="#" onclick="rowStyle_add(\'' + row.itemid + '\')">(' + val + ')</a>';
    }
    function rowstyleformatter(index, row) {
	    if (row.listprice < 200) {
		    return 'background:#ccccff;';
	    } else if (row.listprice < 250) {
		    return 'background:#ccffff;';
	    } else if (row.listprice < 300) {
		    return 'background:#FFFAF0;';
	    } else if (row.listprice < 400) {
		    return 'background:#DCDCDC;';
	    } else if (row.listprice < 500) {
		    return 'background:#F0FFFF;';
	    } else {
		    return 'background:#FFEBCD;';
	    }
    }
</script>